//创建一个Vue实例
var vm1 = new Vue({
        el: "#app-1",
        data: {
            msg: "hello world"
        }
    })
    //挂载点、模板和实例
var vm2 = new Vue({
        el: "#app-2",
        template: '<h1>{{msg}}</h1>',
        data: {
            msg: "cwq~"
        }
    })
    //数据，事件和方法
var vm3 = new Vue({
        el: "#app-3",
        data: {
            msg1: "这是插值表达式",
            msg2: "<h1>这是v-text</h1>",
            content: "<h1>这是v-html</h1>"
        }
    })
    //属性绑定和双向数据绑定
var vm4 = new Vue({
        el: "#app-4",
        data: {
            app_4_title: "this is a title",
            msg: ""
        }
    })
    //计算属性和侦听器
var vm5 = new Vue({
        el: "#app-5",
        data: {
            firstName: "",
            secondName: "",
            f_s_show: false
        },
        computed: {
            fullName: function() {
                return this.firstName + this.secondName;
            }
        },
        watch: {
            fullName: function() {
                if (this.firstName && this.secondName) {
                    this.f_s_show = true;
                } else {
                    this.f_s_show = false;
                }
            }
        }
    })
    //v-if、v-show和v-for + todolist功能
var vm6 = new Vue({
        el: "#app-6",
        data: {
            if_show: true,
            show_show: true,
            list: [1, 2, 3],
            inputValue: "",
            inputList: []
        },
        methods: {
            handlerIfClick: function() {
                this.if_show = !this.if_show;
            },
            handlerShowClick: function() {
                this.show_show = !this.show_show;
            },
            inputClick: function() {
                this.inputList.push(this.inputValue);
                this.inputValue = "";
            }
        }
    })
    //todolist组件拆分
    //①全局组件
    // Vue.component("todo-item", {
    //     props: ["content"],
    //     template: '<li>{{content}}</li>'
    // })
    //②局部组件
var TODOItem = {
    props: ["content"],
    template: '<li>{{content}}</li><img src="">'
}
var vm7 = new Vue({
        el: "#app-7",
        data: {
            inputValue: "",
            inputList: []
        },
        components: {
            "todo-item": TODOItem
        },
        methods: {
            inputClick: function() {
                this.inputList.push(this.inputValue);
                this.inputValue = "";
            }
        }
    })
    //todoList的删除功能
var cwqList = {
    props: ["content", "index"],
    template: "<li>{{content}}<span class=\"iconfont el_icon_cwq-close-circle todoList_icon\" @click='li_click'></span></li>",
    methods: {
        li_click: function() {
            this.$emit("delete", this.index);
        }
    }
}
var vm8 = new Vue({
    el: "#app-8",
    components: {
        "todolist": cwqList
    },
    data: {
        inputValue: "",
        list: []
    },
    methods: {
        handlerClick: function() {
            this.list.push(this.inputValue);
            this.inputValue = "";
        },
        delete_item: function(index) {
            this.list.splice(index, 1);
        }
    }
})